<!--
* @Author: 张昊
* @Date:  2022-10-21 17:31:06
* @FilePath: /pages/subscribe/details/detail/detail.vue
* @Description: 预约详情-选择时间
-->
<template>
	<view class="details">
		<view class="my-head"></view>
		<view class="my-top">
			<image :src="item.image" class="my-top-img"></image>
			<view class="my-top-flex">
				<view class="my-top-title">{{ item.teacher_name }}</view>
				<view>职称：{{ item.title }}</view>
			</view>
		</view>
		<!-- <view class="my-top"  @tap="clickLogin">
			<view class="my-top-img top-img"><u--image width="64" height="64" :src="rawData.avatarUrl" shape="circle"></u--image></view>
			<view class="my-top-flex">
				<view class="my-top-title">{{ rawData.nickName }}</view>
			</view>
		</view> -->
		<!-- 	<view class="my-content">
			<view class="img-list">
				<view class="img-text"><txt-title title="预约说明:"></txt-title></view>
				<view class="img-text">（1）运行期间：每天08：00——18：00时间段的老师。</view>
				<view class="img-text">（2）微信小程序预约可预约当天之后的时间段老师。</view>
				<view class="img-text">（3）机构老师预约：只能预约可选时间段老师。</view>
			</view>
		</view> -->
		<view class="my-content" style="margin-top: 13px;">
			<view class="img-list">
				<view class="img-text" v-if="item.address">
					<txt-title title="院校:" />

					<view class="tag"><u-tag :text="item.address" plain size="mini" type="warning"></u-tag></view>
				</view>
				<view class="img-texts" v-if="item.type_list">
					<txt-title title="专业方向:" />
					<view class="tags">
						<view class="tag" v-for="(unit, index) in item.type_list" :key="index"><u-tag :text="unit.type_name" plain size="mini" type="warning"></u-tag></view>
					</view>
				</view>
				<view class="img-texts" v-if="item.address">
					<txt-title title="预约时间:" />
					<view class="">
						<view class="content2"><u-tabs :list="list" scrollable="true" @click="clicktabs"></u-tabs></view>
						<view style="font-size:30rpx;font-weight: 500;">已预约时间:</view>

						<view class="times">
							<view class="time" v-for="unit in time" :key="unit">
								<u-tag :text="unit.times_start + '-' + unit.times_end" :plain="false" size="mini" type="warning"></u-tag>
							</view>
						</view>
						<view class="" @click="show1 = true">
							<view style="font-size:30rpx;font-weight: 500;">请选择预约开始时间:</view>

							<u--input placeholder="请选择预约开始时间" border="surround" v-model="params.times_start"></u--input>
						</view>
						<view class="" @click="show2 = true">
							<view style="font-size:30rpx;font-weight: 500;">请选择预约结束时间:</view>

							<u--input placeholder="请选择预约结束时间" border="surround" v-model="params.times_end"></u--input>
						</view>

						<u-datetime-picker
							:show="show1"
							v-model="params.times_start"
							mode="time"
							closeOnClickOverlay
							@confirm="confirm($event, 1)"
							@cancel="cancel(1)"
							@close="close(1)"
						></u-datetime-picker>
						<u-datetime-picker
							:show="show2"
							v-model="params.times_end"
							mode="time"
							closeOnClickOverlay
							@confirm="confirm($event, 2)"
							@cancel="cancel(2)"
							@close="close(2)"
						></u-datetime-picker>
					</view>
				</view>
			</view>
		</view>
		<view class="block"></view>
		<view class="foods">
			<view class="buttons"><u-button type="primary" @click="clickNav" text="立即预约"></u-button></view>
		</view>
	</view>
</template>

<script>
import {
	orderSubmit, //立即预约
	timesIndex // 获取时间段
} from '@/common/api.js';
export default {
	data() {
		return {
			item: {},
			list: [],
			time: [],
			params: {
				day: '',
				times_start: '',
				times_end: '',
				service_id: '',
				sex: '',
				age: '',
				contact_name: '',
				contact_mobile: '',
				problem: ''
			},
			show1: false,
			show2: false
		};
	},
	methods: {
		close(index) {
			this['show' + index] = false;
		},
		cancel(index) {
			this['show' + index] = false;
		},
		confirm(e, index) {
			if (index === 2) {
				if (e.value > this.params.times_start) {
					this['show' + index] = false;
					this.result(e.value, e.mode);
				} else {
					uni.$u.toast(结束时间需要小于开始时间);
				}
			}else{
				this['show' + index] = false;
				this.result(e.value, e.mode);
			}
		},
		change(e) {
			// console.log('change', e)
		},
		result(time, mode) {
			const timeFormat = uni.$u.timeFormat,
				toast = uni.$u.toast;
			switch (mode) {
				case 'datetime':
					return toast(timeFormat(time, 'yyyy-mm-dd hh:MM'));
				case 'date':
					return toast(timeFormat(time, 'yyyy-mm-dd'));
				case 'year-month':
					return toast(timeFormat(time, 'yyyy-mm'));
				case 'time':
					return toast(time);
				default:
					return '';
			}
		},
		// 点击日期标签
		clicktabs(item) {
			console.log('item', item);

			this.timeList(item.name);
		},
		// 点击时间段标签
		clickTag(item) {
			if (item.type != 'error') {
				this.time.forEach(e => {
					if (e.type != 'error') e.type = 'success';
				});
				item.type = 'warning';
				this.params.times_id = item.id;
				console.log('111', this.time, item.type);
			}
		},
		async timeList(time) {
			this.params.day = time;
			let { data } = await timesIndex({ teacher_id: this.item.id, day: time });
			this.time = data;
			this.time.forEach(e => {
				if (e.is_allow) {
					this.$set(e, 'type', 'success');
				} else {
					this.$set(e, 'type', 'error');
				}
			});
		},
		async clickNav() {
			if (this.params.times_start && this.params.times_start != '' && this.params.times_end && this.params.times_end != '') {
				await orderSubmit({
					teacher_id: this.item.id,
					name: this.userData.nickName,
					mobile: this.userData.phoneNumber,
					...this.params
				});

				setTimeout(() => {
					uni.$u.toast('预约成功');
				}, 500);
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.$u.toast('请选择时间段');
			}
		}
	},
	async onLoad(params) {
		// this.params.times_start = uni.$u.timeFormat(Number(new Date()), 'hh:MM');
		this.userData = uni.getStorageSync('userData');
		console.log('userData', this.userData);

		this.item = uni.getStorageSync('subscribeDetails');
		console.log('params', this.item);
		for (let i = 0; i < 20; i++) {
			console.log(new Date().getTime() + i * 86400000);
			this.list.push({ name: uni.$u.timeFormat(new Date().getTime() + i * 86400000, 'yyyy-mm-dd') });
		}
		await this.timeList(uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd'));
	}
};
</script>

<style lang="scss"></style>

<style lang="scss">
.my-head {
	background: #cbe9f2;
	height: 50px;
}
.lz-status_bar {
	background-color: #cbe9f2;
}
.my-top {
	background: #cbe9f2;
	display: flex;
	align-items: flex-start;
	padding: 22px;
	color: #fff;
	font-size: 14px;
	height: 122px;
}
.my-top-img {
	width: 164rpx;
	height: 164rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}

.top-img {
	width: 130rpx;
}
.my-top-title {
	font-size: 16px;
}

.my-top-flex {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	height: 64px;
	justify-content: center;
}

.my-content {
	background: #fff;
	width: 90%;
	margin: 0 auto;
	margin-top: -22px;
	padding: 15px 5px 10px;
	border-radius: 7px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.img-list {
		width: 90%;
		.img-text {
			display: flex;
			// flex-direction: column;
			margin: 28rpx 0;
		}
		.img-texts {
			display: flex;
			flex-direction: column;
			margin: 28rpx 0;

			.text {
				flex: 1;
			}
			.tags {
				display: flex;
				flex-wrap: wrap;
				.tag {
					min-width: 260rpx;
					margin: 14rpx;
				}
			}
		}
		.tag {
			// width: 80rpx;
			margin: 0 28rpx;
		}
	}
}

.content2 {
	width: 600rpx;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}
.times {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	.time {
		width: 180rpx;
		margin: 14rpx 28rpx;
	}
}

.buttons {
	margin: 28rpx;
}

.block {
	height: 130rpx;
}
.foods {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 130rpx;
	background-color: #fff;
	box-shadow: #dfdfdf 0px 0px 2px 1px;
}
</style>
